<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./src/assets/echarts.min.js"></script>
    <style>
        .main {
            width: 1200px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="main"></div>
    <script>
        let dom = document.querySelector('.main')
        let myCharts = echarts.init(dom)
        let option = {
            title: {
                text: "用户统计"
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }

            },
            xAxis: {
                boundaryGap: false,
                type: "category",
                data: ["2017-12-17", "2017-12-28", "2017-12-29", "2017-12-30", "2017-12-31", "2018-1-1"]
            },
            yAxis: {
                type: 'value',
                axisline: {
                    show: true
                }
            },
            legend: {
                bottom: "3%",
                type: "plain"
            },

            series: [
                {
                    type: 'line',
                    name: '华东',
                    areaStyle: {
                        origin: 'auto',
                        color: 'rgba(120, 142, 189,.3)'
                    },
                    stack: 'Total',
                    areaStyle: {},
                    data: [2999, 3111, 4100, 3565, 3528, 6000]
                },
                {
                    type: 'line',
                    name: '华南',
                    areaStyle: {
                        origin: 'auto',
                        color: 'rgba(168, 214, 125,0.3)'
                    },
                    areaStyle: {},
                    stack: 'Total',
                    data: [5090, 2500, 3400, 6000, 6400, 7800]
                },
                {
                    type: 'line',
                    name: '华北',
                    areaStyle: {
                        origin: 'auto',
                        color: 'rgba(250, 200, 88,.3)'
                    },
                    areaStyle: {},
                    stack: 'Total',
                    data: [6888, 4000, 8010, 12321, 13928, 12984]
                },
                {
                    type: 'line',
                    name: '西部',
                    areaStyle: {
                        origin: 'auto',
                        color: 'rgba(168, 214, 125,0.3)'
                    },
                    areaStyle: {},
                    stack: 'Total',
                    data: [9991, 4130, 7777, 12903, 13098, 14028]
                },
                {
                    type: 'line',
                    name: '其他',
                    areaStyle: {
                        origin: 'auto',
                        color: 'rgba(168, 214, 125,0.3)'
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    stack: 'Total',
                    data: [15212, 5800, 10241, 14821, 15982, 14091]
                }]
        }
        myCharts.setOption(option)
    </script>
</body>

</html>